<template>
    <div>
        <div class="topWrapper">
            <div class="topBg flex-center">
                欢迎登录神农架林区志愿者服务
            </div>
            <div class="icon">
                
            </div>
        </div>
        <div class="forms">
            <van-cell-group
            >  
                <van-field 
                    clickable
                    clearable
                    size='large'
                    maxlength='11'
                    :border='false'
                    v-model="userIdcard" 
                    :left-icon="sfzIcon"
                    placeholder="请输入手机号" />
                
            </van-cell-group>
            <van-cell-group
            >  
                <van-field 
                    clickable
                    clearable
                    size='large'
                    maxlength='16'
                    :type='psdType'
                    :border='false'
                    v-model="password" 
                    :left-icon="psdIcon"
                    right-icon='closed-eye'
                    placeholder="请输入登录密码"
                    @click-right-icon='closedEyeAction'
                     />
                
            </van-cell-group>
        </div>
        <div class="bot">
            <van-button color="#F65D5D" block loading-text='登录中' :loading='loading' @click="loginAction">登录</van-button>
            <p class="bot-actions">
                <span class="active">忘记密码</span>
                <router-link to="/register" tag='span'>立即注册</router-link>
            </p>
        </div>
    </div>
</template>

<script>
import  {setLocVal} from '@/utils/utils'
export default {
    data(){
        return{
            userIdcard:'',
            password:'',
            psdType:'password',
            sfzIcon:require('../../../static/img/icon_sfz@2x.png'),
            psdIcon:require('../../../static/img/icon_mm@2x.png'),
            loading:false
        }
    },
    methods: {
        closedEyeAction(){
            this.psdType=this.psdType=='password'?'text':'password'
        },
        async loginAction(){
            if(this.userIdcard.length<11){
                this.$toast('请输入正确手机号')
                return
            }
            if(this.password.length<1){
                this.$toast('请输入正确登录密码')
                return
            }
            this.loading=true
            try{
                let res=await this.$http({
                    method:'api.user.login',
                    username:this.userIdcard,
                    password:this.password
                })
                setLocVal('token',res.data.token)
                this.$toast({
                    message:'登录成功',
                    duration:1000,
                    onClose:()=>{
                        this.$router.replace('/user')
                    }
                })
            }catch(err){
                console.log(err)
                this.loading=false
            }
            
            
           
        }
    },
    created(){
      
    }
}
</script>

<style scoped lang='scss'>
.topWrapper{position: relative;height: 3.95rem;}
.topBg{
    height: 3.44rem;position: relative;
    background-image: url('../../../static/img/index/banner@2x.png');
    background-repeat: no-repeat;
    // background-color: red;
    background-size: contain;
    background-position: center;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    position: absolute;
    left: -5%;
    top: 0;
    width: 110%;
    font-size: .34rem;
    color: #fff;
}
/deep/ .forms{
    margin-top: .5rem;
    padding: 0 .64rem;
    .van-field__left-icon{
        margin-right: .7rem;
    }
    .van-image{
        width: .28rem;height: .33rem;
    }
    .van-cell-group{margin-bottom: .2rem;}
}
.bot{margin-top: .9rem;padding: 0 .68rem;}
.bot-actions{margin-top: .55rem;color: #A8A7A5;text-align:center;
span{padding: 0 .2rem;position: relative;
    &:first-of-type::after{
        content: '';
        position: absolute;
        right: 0;
        width: 1px;
        height: 12px;
        background: #CD595B;
    }
}
.active{color: #CD595B}
}
</style>